import {verifyGetCode} from '@/api/login'
import {uEditUserNearName, uEditUserPhone} from '@/api/user'
import useCountDown from '@/hooks/coundDown'
import {FormInstance} from 'ant-design-vue'
import {PropType} from 'vue'
import {IconImg} from '../image'
import {ChangeVisible} from '../modal'
import {CnBoldSpan, CnMediumSpan, CnNormalSpan} from '../text'
import {message} from '@/libs/global/antDesignVue'

const MFTable = defineComponent({
  setup(props, {slots}) {
    return () => <table class='table-auto w-full mb-20'>{slots.default?.()}</table>
  }
})

const MFTbody = defineComponent({
  setup(props, {slots}) {
    return () => <tbody>{slots.default?.()}</tbody>
  }
})

const MFTr = defineComponent({
  setup(props, {slots}) {
    return () => <tr class='h-56'>{slots.default?.()}</tr>
  }
})

const MFTdByLabel = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-right pl-51'>{slots.default?.()}</td>
  }
})

const MFTdByValue = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-left'>{slots.default?.()}</td>
  }
})

const MFTdByUnit = defineComponent({
  setup(props, {slots}) {
    return () => <td class='text-left  pr-51'>{slots.default?.()}</td>
  }
})

const EditUserPhoneModalForm = defineComponent({
  name: 'EditUserPhoneModalForm',
  props: {
    changeVisible: Function as PropType<ChangeVisible>,
    userInfo: {
      type: Object as PropType<User.Info>,
      required: true
    }
  },
  emits: {
    finish: (formRef?: FormInstance) => true,
    reset: (formRef?: FormInstance) => true
  },
  setup(props, {emit, slots}) {
    const state = reactive<{
      newPhone: string
      authCode: string
      spinning: boolean
    }>({
      newPhone: '',
      spinning: false,
      authCode: ''
    })
    const {counDownStart, countDownText, isCountDownStart, starting} = useCountDown({
      startVal: 60,
      seconds: 60,
      defaultText: '获取验证码'
    })

    function getAuthCode() {
      verifyGetCode({userId: props.userInfo.userId, userPhone: state.newPhone})
        .then(res => {
          console.log(res)
          counDownStart()
        })
        .catch(err => {
          console.log(err)
        })
    }

    function handleConfirmClick() {
      state.spinning = true
      uEditUserPhone({
        userId: props.userInfo.userId,
        newUserPhone: state.newPhone,
        verfiyCode: state.authCode
      })
        .then(res => {
          state.spinning = false
          props.changeVisible && props.changeVisible(false)
          emit('finish')
        })
        .catch(err => {
          state.spinning = false
        })
    }

    function handleCancelClick() {
      props.changeVisible && props.changeVisible(false)
      emit('finish')
    }

    onMounted(() => {})

    return () => (
      <div class='relative'>
        <MFTable>
          <MFTbody>
            <MFTr>
              <td colspan={3} class='pl-24'>
                <CnMediumSpan class='text-14 mr-16'>原号码</CnMediumSpan>
                <CnNormalSpan>{props.userInfo.userPhone}</CnNormalSpan>
              </td>
            </MFTr>

            <MFTr>
              <MFTdByLabel>
                <CnBoldSpan class='mr-8'>+86</CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue>
                <a-input
                  class='h-30'
                  placeholder='请输入您的新手机号码'
                  type='number'
                  v-model={[state.newPhone, 'value']}
                ></a-input>
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>

            <MFTr>
              <MFTdByLabel>
                <CnBoldSpan class=''></CnBoldSpan>
              </MFTdByLabel>
              <MFTdByValue class='relative'>
                <a-input
                  class='h-30'
                  placeholder='请输入验证码'
                  v-model={[state.authCode, 'value']}
                ></a-input>
                <CnNormalSpan
                  class='absolute bg-white right-8 top-1/2 transform -translate-y-1/2 cursor-pointer'
                  onClick={() => {
                    if (!state.newPhone) return message.warning('请输入新手机号')
                    isCountDownStart.value && getAuthCode()
                  }}
                >
                  {countDownText.value}
                </CnNormalSpan>
              </MFTdByValue>
              <MFTdByUnit></MFTdByUnit>
            </MFTr>
          </MFTbody>
        </MFTable>

        <div class='ant-modal-footer'>
          <a-button loading={state.spinning} class='ant-btn' onClick={handleCancelClick}>
            取消
          </a-button>
          <a-button class='ant-btn' type='primary' onClick={handleConfirmClick}>
            确定
          </a-button>
        </div>
      </div>
    )
  }
})

export default EditUserPhoneModalForm
